<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Water drops effect</title>
        <link rel="stylesheet" href="main.css" type="text/css" />
    </head>
    <body>
        <div class="example">
        	<!--跳过动画-->
        	<div class='active'>
        		跳过动画>
        	</div>
        	
        	<!--月亮-->
        	<div class="yue"></div>
        	<div class="left">BRAVOU</div>
        	<div class="right">米兰柏羽</div>
        		
        		
        	<!--水纹效果-->       	
        	<div  class='tow'>
        			<span></span>
        			<span></span>
        			<span></span>
        			<span></span>
        			<span></span>
        			<span></span>        			
        	</div>    
       </div>
        	<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
        	  
        	<script type="text/javascript">
        	$(function(){
        		//设置可视区域为屏幕大小
        			$("div.example").css({
        				"width":document.documentElement.clientWidth+"px",
        				"height":document.documentElement.clientHeight+"px"
        			});
        			//动画
        			
        			//月亮移动
        			setTimeout(function(){
        				$("div.yue").animate({'top':'55%','opacity':'1','transform':'rotateY(0deg)'},1000);
        			},0)
        			
        			//水纹散开
        			var i=0;
        			setTimeout(function(){
        				setInterval(function(){
        					$("div.tow span").eq(i).animate({
        					'width':'160px',   
        					'height': '160px',
        					'margin-left':'-80px',
        					'margin-top':"-80px",
							'opacity': '1'
							},3000);
							i++;
        				},400);
        			},700);
        			
        			//水纹消失
        			var  j=$("div.tow span").length+1;
        			setTimeout(function(){
        				setInterval(function(){
        					$("div.tow span").eq(j).animate({'opacity': '0'},150);j--;
        				},100);
        			},2500);
        			//两边字体移动
        			setTimeout(function(){
        				$("div.left").animate({'left':'34%','opacity':'1'},2000);
        				$("div.right").animate({'left': '70%','opacity':'1'},2000);
        			},3400);
        			//月亮旋转
        			setTimeout(function(){
        				//$("div.yue").css("transform","rotateY(360deg)");
        				$("div.yue").addClass("rotate");
        			},5000);
        			
        			
        		
        			
        			//5s转跳
        			setTimeout(function(){
        				Href();
        			},5500);
        			
        			//转跳方法
        			function Href(){
        				window.location.href='http://www.baidu.com';
        			}
        			
        			//点击转跳
        			$(".active").click(function(){Href();});
        		
        	});
        			
        			
        	</script>

 
     
    </body>
</html>